<!DOCTYPE html> 
<html> 
<head> 
	<title>Anymap</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="jquery.mobile.custom/jquery.mobile.custom.structure.min.css" />
	<link rel="stylesheet" href="jquery.mobile.custom/jquery.mobile.custom.theme.min.css" />
	<script src="jquery.mobile.custom/jquery-1.8.3.min.js"></script>
	<script src="jquery.mobile.custom/jquery.mobile.custom.min.js"></script>
  <!-- load VsLib -->
  <script src="VsLib/xdr.js"></script>
  <script src="VsLib/VsLib.min.js"></script>
  <script src="VsServiceMethod.js"></script>
  <script>
        $.support.cors = true;

        var dataForTestGetPin =
        {
            "user_map_view":
                {
                    "center_latlng": { "lat": 18.28781494186995, "lng": 89.6748359068345 },
                    "bounds": { "sw": { "lat": 2.916747876840908, "lng": 52.98049996933461 }, "ne": { "lat": 32.413390076445864, "lng": 126.3691718443362 } },
                    "zoom_lv": 4, "time_period": { "start": "2013-01-23T08:06:41.386Z", "end": "2013-01-31T15:43:12.401Z" }
                },
            "user_authen": { "UserName": "anonymous", "UserId": "000", "key": "000" }
        };

        $(function () {
            $.mobile.loading( 'show', {
              text: 'loading',
              textVisible: true,
              theme: 'z',
              html: ""
            });
            var serviceMethod = new VsSeviceMethod();
            serviceMethod.getPinId(dataForTestGetPin.user_map_view, dataForTestGetPin.user_authen, function (data) {
                    var num = 0;
                    serviceMethod.getPinByIds(data, dataForTestGetPin.user_authen, function (r) {
                        for (var i = 0; i < 10 && i < r.length; i++) {                           
                            var d = r[i];
                            var _topic = typeof d['topic'] == "object" ? JSON.stringify(d['topic']) : d['topic'];
                            var _brief = typeof d['brief'] == "object" ? JSON.stringify(d['brief']) : d['brief'];
                            var _icon = typeof d['icon_url'] == "object" ? JSON.stringify(d['icon_url']) : d['icon_url'];
                            var result = '<li><a href="index-0.html">' + '<img src="' + _icon + '" style="width:100%" /><h4>' + _topic + '</h4><p>' + _brief + '</p></a></li>'; 
                            $('#listview').append(result);
                            $('#listview').listview('refresh');
                        }
                        $.mobile.loading('hide');
                    });
                });
        });

    </script>
</head> 

<body> 
<!-- Start of second page: #two -->
<div data-role="page" id="one">
    <div data-role="header">
      <h1>AnyMap Mobile Web Testing</h1>
    </div><!-- /header -->
    <div data-role="content">
      <ul data-role="listview" id="listview"></ul>
    </div>
</div>
<!-- /page one -->

</body>
</html>
